<template>
  <div>
    <el-container>
      <el-aside style="background-color: white;" width="40%">
        <div  style="width:600px;margin:5px auto;" class="tree-box">
          <div class="zTreeDemoBackground left">
            <ul id="treeDemo" class="ztree"></ul>
          </div>
        </div>
      </el-aside>
      <el-main style="background-color: white" width="50%">
        <el-form ref="form" :model="Form" label-width="90px" size="mini">
          <el-form-item
            prop="PID"
            label="父级菜单："
            :style="{ width: '400px', height: '30px' }"
          >
            <el-select v-model="Form.pID" placeholder="请选择父级">
              <el-option
                v-for="item in treelist"
                :key="item.id"
                :label="item.name"
                :value="item.id"
                >{{ item.name }}</el-option
              >
            </el-select>
          </el-form-item>
          <el-form-item
            label="菜单名称："
            :style="{ width: '400px', height: '30px' }"
          >
            <el-input v-model="Form.name"></el-input>
          </el-form-item>

          <el-form-item
            label="页面地址："
            :style="{ width: '400px', height: '30px' }"
          >
            <el-input v-model="Form.url"></el-input>
          </el-form-item>
          <el-form-item
            label="排序Id："
            :style="{ width: '400px', height: '30px' }"
          >
            <el-input v-model="Form.sortId"></el-input>
          </el-form-item>
          <el-form-item
            label="菜单图标："
            :style="{ width: '400px', height: '30px' }"
          >
            <el-input v-model="Form.iconUrl"></el-input>
          </el-form-item>
          <el-form-item
            :style="{ width: '400px', height: '30px' }"
            label="权限状态："
          >
            <el-radio-group v-model="Form.isDelete" size="medium">
              <el-radio border :label="true" >启用</el-radio>
              <el-radio border :label="false">禁用</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item
            :style="{ width: '500px', height: '30px' }"
            size="large"
          >
           <el-button type="primary" @click="AddChildnode"
              >添加子节点</el-button
            >
              <el-button type="primary" @click="AddPeernode"
              >添加同级节点</el-button
            >
           <el-button type="primary" @click="Updatenode">修改</el-button>
          </el-form-item>
        </el-form>
      </el-main>
    </el-container>
  </div>
</template>
<script>
import { gettreeapi, getallPermissionapi,AddChildnodeapi,Updatenodeapi } from "@/api/sysconfig/menumanage";
export default {
  name: "zTree",
  data: function () {
    return {
      Id:"",
      Form: {
        pID: "",
        name: "",
        url: "",
        sortId: "",
        isDelete: false,
        iconUrl: "",
      },
      treelist: [],
      setting: {
        callback: {
          // 树的点击事件
          onClick: function (event, treeId, treeNode) {
            console.log(treeNode)
            this.Id=treeNode.id;
            this.Form.pID=treeNode.parentId;
            this.Form.name=treeNode.name;
            this.Form.url=treeNode.pUrl;
            this.Form.iconUrl=treeNode.iconUrl;
            this.Form.sortId=treeNode.sortId
            this.Form.isDelete=treeNode.iSDelete;
          }.bind(this),
        },
        view: {
          showLine: true, //是否显示节点的链接线
        },
        
        data: {
          simpleData: {
            enable: false,
            idKey: "value",
            pIdKey: "pid",
            rooePId: 0,
          },
        },
      },
    };
  },
  mounted() {
    this.gettree();
  },
  methods: {
    AddPeernode()
    {
       AddChildnodeapi(this.Form).then(
        (res) => {
          if(res.data.data>0)
          {
              this.$message.success("添加成功");
          }else{
            this.$message.error("添加失败");  
          }
          this.gettree();
        },
        (err) => {
          console.error(err);
        }
      );
    },
    AddChildnode(){
      this.Form.pID=this.Id;
      AddChildnodeapi(this.Form).then(
        (res) => {
          console.log(res);
          if(res.data.Data>0)
          {
              this.$message.success("添加成功");
          }else{
            this.$message.error("添加失败");  
          }
          this.gettree();
        },
        (err) => {
          console.error(err);
        }
      );
    },
    Updatenode()
    {
      this.Form.Id=this.Id;
      Updatenodeapi(this.Form).then(
        (res) => {
          console.log(res);
          if(res.data.Data>0)
          {
              this.$message.success("修改成功");
          }else{
            this.$message.error("修改失败");  
          }
          this.gettree();
        },
        (err) => {
          console.error(err);
        }
      );
    },
    //获取权限树
    gettree() {
      var myparams = {
        pId: 0,
      };
      //根据参数获取权限树
      gettreeapi(myparams).then(
        (res) => {
          $.fn.zTree.init($("#treeDemo"), this.setting, res.data.data);

          console.log(res.data.data);
        },
        (err) => {
          console.error(err);
        }
      );
      //获取所有权限
      getallPermissionapi().then((res) => {
        this.treelist = res.data.data;
      });
    },
  },
};
</script>

<style>
#areaTree {
  border: 1px solid #e5e5e5;
  margin-bottom: 2px;
  border-radius: 4px;
  overflow: hidden;
  width: 15%;
}
.box-title {
  border-radius: 3px 3px 0 0;
  background-color: #f5f5f5;
}
.box-title a {
  color: #2fa4e7;
  text-decoration: none;
  font-size: 14px;
  display: block;
  padding: 8px 15px;
  cursor: pointer;
}
.box-title .fa {
  float: right;
  line-height: 20px;
}
</style>